<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-10 14:26:48
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-06 15:20:43
 * @FilePath: /web/src/views/indexPage/quality.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-10-10 11:09:23
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="secure">
    <el-row>
      <el-col :span="7" style="margin-left: 20px">
        <div class="record" style="border: none; width: 405px; margin-left: 45px">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" style="width: 115%" />
            </div>
            <div class="text">桁吊安全监测</div>
          </div>
        </div>
        <div class="mid1">
          <div class="plan" style="margin-left: 0">
            <div class="title">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">桁吊预警</div>
            </div>
            <div class="yuan">
              <div class="nei" v-for="(item, index) in boomCraneList" :key="index">
                <div class="box">
                  <img style="width: 90px" src="../../assets/images/xiandiao.png" alt="" />
                  <div>
                    <div class="text1">{{ item.name }}</div>
                    <div class="text2">{{ item.status }}</div>
                  </div>
                </div>
                <div style="margin-top: 5px">
                  <img src="../../assets/images/u1153.svg" style="width: 80%" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mid1">
          <div class="plan" style="margin-left: 0; height: 360px">
            <div class="pro-type">
              <el-button style="width:50px" v-for="(item, index) in options" :key="index"
                :type="type == item ? 'primary' : ''" @click="changeType(item)" size="mini">
                {{ item }}
              </el-button>
            </div>
            <div class="title" style="height: 40px">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">桁吊开箱记录</div>
            </div>
            <div class="record-list">
              <rollList :data-list="dataList" :height="300">
                <div class="list" v-for="(item, index) in dataList" :key="index">
                  <img src="../../assets/images/u1174.png" alt="" />
                  <div style="margin-left: 20px">{{ item.createTime }}</div>
                  <div style="margin-left: 10px">开箱人：{{ item.creator }}</div>
                </div>
              </rollList>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="10" style="margin-left: -20px; margin-top: 70px">
        <div class="record" style="border: none">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" style="width: 715px" />
            </div>
            <div class="text">视频监控</div>
          </div>
          <div class="video">
            <div class="list" @click="handleOpenVideo(0)">
              <img src="../../assets/images/u1181.svg" alt=""/>
              <div class="shipin" style="" >
                <div id="my-player-0" ></div>
              </div>
            </div>
            <div class="list" @click="handleOpenVideo(1)">
              <img src="../../assets/images/u1181.svg" alt="" />
              <div class="shipin">
                <div id="my-player-1"></div>
              </div>
            </div>
            <div class="list" @click="handleOpenVideo(2)">
              <img src="../../assets/images/u1181.svg" alt="" />
              <div class="shipin">
                <div id="my-player-2"></div>
              </div>
            </div>
            <div class="list" @click="handleOpenVideo(3)">
              <img src="../../assets/images/u1181.svg" alt="" />
              <div class="shipin">
                <div id="my-player-3"></div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="margin-left: -20px">
        <div class="record" style="border: none; width: 405px; margin-left: 45px">
          <div class="top">
            <div class="left">
              <img src="../../assets/images/kuohao.png" alt="" />
            </div>
            <div class="right">
              <img src="../../assets/images/u193.svg" alt="" style="width: 115%" />
            </div>
            <div class="text">AI安全识别</div>
          </div>
        </div>
        <div class="mid1">
          <div class="plan" style="margin-left: 0; height: 220px">
            <div class="title">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">AI抓拍统计</div>
            </div>
            <div class="colums1">
              <div class="progress" v-for="(item, index) in statisticList" :key="index">
                <div style="position: relative">
                  <div class="left"></div>
                  <div class="right1"></div>
                  <div class="text">
                    {{ item.name }}
                  </div>
                  <div class="blue"></div>
                  <div class="blue1"></div>
                  <div class="middle">{{ item.count>20?item.count=20:item.count }}次</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mid1">
          <div class="plan" style="margin-left: 0; height: 570px">
            <div class="title">
              <img class="headImg" src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">AI抓拍记录</div>
            </div>
            <div class="slider">
              <rollList :data-list="recordList" :height="500">
                <div class="list" v-for="(item, index) in recordList" :key="index" style="height: 160px">
                  <div class="left">
                    <img src="../../assets/images/u1027.svg" alt="" />
                    <div style="font-size: 16px">{{ item.name }}</div>
                    <div style="font-size: 16px">{{ item.time }}</div>
                  </div>
                  <div class="">
                    <el-image 
                      style="width: 180px; margin-left: 20px"
                      :src="item.src" 
                      :preview-src-list="[item.src]">
                    </el-image>
                  </div>
                </div>
              </rollList>
            </div>
          </div>
        </div>
      </el-col>
        <el-dialog :title="'视频详情'" :visible.sync="visable" width="80%" top="5vh" class="quality-info-dialog"
        append-to-body>
        <div id="dialog-player"></div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import pieChart from "../../components/pieChart/index.vue";
import lineChart from "../../components/lineChart/index.vue";
import {
  getFontList,
  getFontRecordList,
  getOptionNameList,
  getToken,
  totalWarnByAI,
  listLastWarnByAI
} from "@/api/bigScreen.js";
import dayjs from 'dayjs'
export default {
  components: {
    pieChart,
    lineChart,
    rollList: () => import("../../components/RollList/index.vue"),
  },
  data() {
    return {
      dataList: [

      ],
      options: [],
      list: [
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
        {
          pc: "JY20240903004",
          sl: "30",
          jcr: "张三",
          sj: "2024.09.03  13：26",
          jg: "正常",
        },
      ],
      input3: "",
      boomCraneList: [
      ],
      statisticList: [],
      recordList: [],
      visable:false,
      type: 1,
      player: [],
      vedioUrls: [
        'ezopen://open.ys7.com/FB7719093/1.hd.live',
        'ezopen://open.ys7.com/FB7719093/2.hd.live',
        'ezopen://open.ys7.com/FB7719093/3.hd.live',
        'ezopen://open.ys7.com/FB7719093/4.hd.live'
      ],
      vedioToken: ''
    };
  },
  mounted() {
    this.getDataList();
    this.getStatisticList();
    this.getRecordList();
    this.getFontListS();
    this.getOpntions();
    this.initVedio()
  },
  methods: {
    async initVedio() {
      let res = await getToken();
      this.vedioToken = res.data.data.accessToken
      this.vedioUrls.forEach((url, index) => {
        const play = new EZUIKit.EZUIKitPlayer({
          id: `my-player-${index}`, // 视频容器ID
          // accessToken:
          // "at.5dk80wx726cb9kf96zuhzjrrdby7vnfm-4n7dmr3rz4-1qvns2k-bqmrs7pyw",
          accessToken: this.vedioToken,
          url: url,
          // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
          // 播放主题simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
          template: "simple",
          useHardDev: true, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
          // plugin: ["talk"], // 加载插件，talk-对讲 非必填
          width: 330, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
          height: 350, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
          handleError: (data) => {
            console.info(data)
          }
        });
        this.player.push(play)
      })

    },
    getFontListS() {
      this.boomCraneList = []
      getFontList().then(res => {
        if (res.data) {
          res.data.forEach(e => {
            this.boomCraneList.push({ name: e.name, status: e.monitor == 0 ? '正常' : '预警', monitor: e.monitor })
          })
        }
      })
    },
    getStatisticList() {
      totalWarnByAI().then(res => {
        for(let i in res.data){
          this.statisticList.push({
            name:i,
            count:res.data[i]
          })
        }
      })
    },
    getRecordList() {
      listLastWarnByAI().then(res => {
        console.log(res,22222222222)
        res.data.map(item=>{
          this.recordList.push({
            name: item.algoId,
            time: item.createTime,
            src: item.alarmPicData,
          })
        })
      })
      // this.recordList = [
      //   {
      //     name: "未穿反光警服",
      //     time: "2023.12.23 15：26",
      //     src: "../../assets/images/u1019.png",
      //   },
      //   {
      //     name: "未穿反光警服",
      //     time: "2023.12.23 15：26",
      //     src: "../../assets/images/u1019.png",
      //   },
      //   {
      //     name: "未穿反光警服",
      //     time: "2023.12.23 15：26",
      //     src: "../../assets/images/u1019.png",
      //   },
      //   {
      //     name: "未穿反光警服",
      //     time: "2023.12.23 15：26",
      //     src: "../../assets/images/u1019.png",
      //   },
      // ];
    },
    getDataList() {
      getFontRecordList({ gantryName: this.type }).then(res => {
        this.dataList = res.data
      })
    },
    async getOpntions() {
      let res = await getOptionNameList()
      if (res.data && res.data.length > 0) {
        this.type = res.data[0]
        this.getDataList()
      }
      this.options = res.data
    },
    changeType(type) {
      console.log(type);
      this.type = type;
      this.getDataList();
    },
    handleOpenVideo(index){
      this.visable = true
      let height = window.innerHeight * 0.8 
      let width = window.innerWidth* 0.8-40
      const play = new EZUIKit.EZUIKitPlayer({
          id: `dialog-player`, // 视频容器ID
          // accessToken:
          // "at.5dk80wx726cb9kf96zuhzjrrdby7vnfm-4n7dmr3rz4-1qvns2k-bqmrs7pyw",
          accessToken: this.vedioToken,
          url:this.vedioUrls[index],
          // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
          // 播放主题simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
          template: "simple",
          useHardDev: true, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
          // plugin: ["talk"], // 加载插件，talk-对讲 非必填
          width: width, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
          height: height, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
          handleError: (data) => {
            console.info(data)
          }
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.secure {
  .mid1 {
    margin-top: 20px;
    margin-left: 9%;

    .list {
      display: flex;
      padding: 5px 20px;
      background-color: rgba(8, 54, 78, 1);
      color: #fccd1d;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      margin: 15px 10px;
      border-radius: 5px;

      img {
        width: 40px;
      }
    }

    .plan {
      width: 90%;
      border: 1px solid rgba(2, 231, 243, 1);
      position: relative;

      .pro-type {
        margin-top: 5px;
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        position: absolute;
        right: 15px;
        z-index: 9999;
        justify-content: center;

        .el-button+.el-button {
          margin-left: 3px;
        }

        .el-button[data-v-09d6f742] {
          color: #1b1a1a;
        }

        .el-button.el-button--primary {
          color: #ffffff;
          background-color: rgb(5, 85, 108);
          border-color: rgb(5, 85, 108);
        }

        .el-button--mini {
          padding: 0px;
        }

        .el-button:hover {
          color: rgb(5, 85, 108);
        }

        .el-button.el-button--primary:hover {
          color: #ffffff;
        }

        .el-button {
          color: #ffffff;
          background-color: rgb(170, 170, 170);
          border: none;
          height: 22px;
          line-height: 0.8;
        }
      }

      .right {
        color: white;
        position: absolute;
        top: 10px;
        right: 10px;
        font-weight: bold;

        .yellow {
          color: #fccd1d;
        }
      }
    }

    .record-list {
      height: 310px;
      overflow: auto;
    }

    .yuan {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100%;

      .nei {
        width: 50%;
        text-align: center;
        padding: 10px 20px;
      }

      .box {
        display: flex;
        justify-content: center;
        width: 100%;
        align-items: center;

        img {
          margin-right: 20px;
        }

        .text1 {
          color: white;
          font-size: 12px;
        }

        .text2 {
          color: #70b603;
          font-size: 16px;
        }
      }
    }

    .title {
      position: relative;

      .statistics {
        top: 6px;
        left: 10px;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #01f7fd;
        position: absolute;
      }
    }

    .colums1 {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .progress {
      margin-top: 8px;
      position: relative;
      height: 40px;
      padding-left: 3%;
      width: 50%;
      margin-bottom: 10px;

      .left {
        background-color: rgba(252, 205, 29, 0.3);
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        width: 100px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .right1 {
        border-top: 40px solid rgba(252, 205, 29, 0.3);
        /* 梯形的高度 */
        border-right: 25px solid transparent;
        /* 右边斜面的宽度 */
        height: 0;
        width: 40px;
        /* 梯形的宽度 */
        position: absolute;
        left: 100px;
        top: 0px;
      }

      .text {
        position: absolute;
        top: 5px;
        left: 10px;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        color: #fccd1d;
      }

      .middle {
        display: flex;
        position: absolute;
        left: 145px;
        top: 10px;
        color: #01f7fd;
      }

      .line {
        height: 20px;
        width: 5px;
        border-radius: 3px;
        background: white;
        margin-right: 8px;
      }

      .yellow {
        color: #fccd1d;
      }

      .total {
        position: absolute;
        right: 10%;
        top: 13px;
        font-size: 18px;
        color: white;
        font-weight: bold;
      }

      .blue {
        border-bottom: 36px solid rgba(1, 247, 253, 0.5);
        /* 梯形的高度 */
        border-left: 20px solid transparent;
        /* 右边斜面的宽度 */
        height: 0;
        width: 40px;
        /* 梯形的宽度 */
        position: absolute;
        left: 121px;
        top: 4px;
      }

      .blue1 {
        background-color: rgba(1, 247, 253, 0.5);
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        width: 18%;
        height: 36px;
        position: absolute;
        left: 161px;
        top: 4px;
      }
    }
  }

  .waring {
    width: 82%;
    height: 220px;
    margin-left: 11%;
    margin-top: 20px;
    overflow: hidden;
    overflow-y: scroll;

    .redline {
      width: 98%;
      background: rgb(144, 65, 73);
      color: white;
      border-radius: 5px;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      display: flex;
      align-content: center;
      font-size: 16px;
      font-weight: bold;
      padding-left: 10px;
    }

    .yellowline {
      width: 98%;
      background: rgb(179, 115, 34);
      color: white;
      border-radius: 5px;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      display: flex;
      align-content: center;
      font-size: 16px;
      font-weight: bold;
      padding-left: 10px;
    }
  }

  .record {
    margin-left: 7%;
    width: 90%;
    margin-top: 20px;

    .top {
      display: flex;
      position: relative;

      .left {
        position: absolute;
        left: -10px;
        top: 0px;

        img {
          width: 30px;
          height: 40px;
        }
      }

      .right {
        img {
          margin-top: 5px;
          width: 100%;
          height: 30px;
        }
      }

      .text {
        position: absolute;
        left: 30px;
        top: 8px;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #00ffff;
      }
    }
  }

  .video {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    position: relative;

    .list {
      height: 365px;
      border: 1px solid #ffff;
      border-radius: 8px;
      width: 340px;
      padding-top: 20px;
      margin-top: 10px;
      margin-right: 1%;
      margin-left: 1%;
      margin-bottom: 10px;
      position: relative;

      img {
        width: 30px;
        margin-left: 20px;
        position: absolute;
        left: 5px;
        right: 5px;
        z-index: 999;
      }

      .shipin {
        position: absolute;
        left: 3px;
        top: 3px;
      }

    }
  }

  .slider {
    .list {
      display: flex;
      justify-content: space-between;
      margin: 10px 20px;

      .left {
        width: 180px;
        text-align: center;
        color: white;
        padding: 20px 0;

        .headImg {
          width: 40px;
        }

        .wrang {}
      }
    }
  }
}
</style>
